<template>
  <view class="mine-page">
    <!-- 顶部操作区 -->
    <view class="mine-topbar">
      <button class="icon-btn left-btn">
        <image src="../../static/icon/add-friend.svg" mode="aspectFit" alt="添加好友" />
      </button>
      <view class="right-btns">
        <button class="icon-btn"><image src="../../static/icon/coin.svg" mode="aspectFit" alt="金币中心" /></button>
        <button class="icon-btn"><image src="../../static/icon/scan.svg" mode="aspectFit" alt="扫码" /></button>
        <button class="icon-btn"><image src="../../static/icon/device.svg" mode="aspectFit" alt="我的设备" /></button>
        <button class="icon-btn"><image src="../../static/icon/setting.svg" mode="aspectFit" alt="设置" /></button>
      </view>
    </view>

    <!-- 用户信息区 -->
    <view class="mine-userinfo">
      <image class="avatar" src="../../static/images/avatar.png" mode="aspectFit" alt="头像" />
      <view class="userinfo-main">
        <view class="nickname">Truman987</view>
        <view class="follow-info">
          <text>关注 2</text>
          <text>粉丝 0</text>
        </view>
      </view>
    </view>

    <!-- 会员卡片区 -->
    <view class="mine-vip-card">
      <view class="vip-title">开通会员，享受更多权益</view>
      <button class="vip-btn">立即开通</button>
    </view>

    <!-- 功能宫格区 -->
    <view class="mine-grid">
      <view class="grid-item"><image src="../../static/icon/dongtai.svg" mode="aspectFit" /><text>我的动态</text></view>
      <view class="grid-item"><image src="../../static/icon/star.svg" mode="aspectFit" /><text>收藏与加油</text></view>
      <view class="grid-item"><image src="../../static/icon/lesson.svg" mode="aspectFit" /><text>我的课程</text></view>
      <view class="grid-item"><image src="../../static/icon/order.svg" mode="aspectFit" /><text>订单与钱包</text></view>
      <view class="grid-item"><image src="../../static/icon/gift.svg" mode="aspectFit" /><text>领福利</text></view>
      <view class="grid-item"><image src="../../static/icon/team.svg" mode="aspectFit" /><text>我的团队</text></view>
      <view class="grid-item"><image src="../../static/icon/help.svg" mode="aspectFit" /><text>帮助中心</text></view>
    </view>

    <!-- 数据区 -->
    <view class="mine-data">
      <van-swipe :loop="false" class="data-swipe" :touchable="true" :width="560">
        <van-swipe-item>
          <view class="data-card">
            <view class="data-title">运动记录</view>
            <view class="data-value">0 分钟</view>
            <view class="data-desc">本周运动</view>
          </view>
        </van-swipe-item>
        <van-swipe-item>
          <view class="data-card">
            <view class="data-title">体重数据</view>
            <view class="data-value">62.0 公斤</view>
            <view class="data-desc">近12个月</view>
          </view>
        </van-swipe-item>
        <van-swipe-item>
          <view class="data-card">
            <view class="data-title">累计运动</view>
            <view class="data-value">0 小时</view>
            <view class="data-desc">总计</view>
          </view>
        </van-swipe-item>
      </van-swipe>
    </view>
  </view>
</template>

<script setup>
// 用户数据、接口等
</script>

<style scoped>
.mine-page {
  background: #fff;
  box-sizing: border-box;
  padding: 0 16rpx;
  overflow-x: hidden;
  padding-bottom: 16rpx;
}

.mine-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0 0 0;
  height: 40rpx;
}

.icon-btn {
  background: none;
  border: none;
  padding: 0 4rpx;
  height: 32rpx;
  width: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn image {
  width: 20rpx;
  height: 20rpx;
}

.left-btn {
  margin-right: 8rpx;
}

.right-btns {
  display: flex;
  gap: 2rpx;
}

.mine-userinfo {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
}

.avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.userinfo-main {
  flex: 1;
}

.nickname {
  font-size: 20rpx;
  font-weight: bold;
}

.follow-info {
  margin-top: 6rpx;
  color: #888;
  font-size: 14rpx;
  display: flex;
  gap: 16rpx;
}

.mine-vip-card {
  background: linear-gradient(90deg, #f9e7c0, #f7d7b7);
  border-radius: 12rpx;
  margin: 12rpx 0;
  padding: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vip-title {
  font-size: 16rpx;
  color: #a67c00;
}

.vip-btn {
  background: #ffb300;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  padding: 6rpx 18rpx;
  font-size: 15rpx;
}

.mine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12rpx 0;
  padding: 16rpx 0 0 0;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13rpx;
  color: #333;
  padding: 10rpx 0;
}

.grid-item image {
  width: 28rpx;
  height: 28rpx;
  margin-bottom: 4rpx;
}

.mine-data {
  margin: 18rpx 0 16rpx 0;
}

.data-swipe {
  background: #f7f8fa;
  border-radius: 12rpx;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  --swipe-width: 560rpx;
}

:deep(.van-swipe__track) {
  width: var(--swipe-width) !important;
}

.data-card {
  text-align: center;
  padding: 16rpx;
}

.data-title {
  font-size: 15rpx;
  color: #888;
}

.data-value {
  font-size: 22rpx;
  font-weight: bold;
  margin: 8rpx 0;
}

.data-desc {
  font-size: 13rpx;
  color: #aaa;
}
</style>
